<template>
    <a-modal :title="formRelation.title" :width="800" :confirmLoading="submitLoading" :visible="formRelation.visible" :footer="null" @cancel="close">
      <a-card title="仅支持xls、xlsx格式，文件大小不超过10MB" style="margin-bottom:10px">
        <template #extra><a-button type="primary" @click="submitTaskTemp('formRelation')">提交任务</a-button></template>
        <a-form-model :label-col="{ span: 4 }"
    :wrapper-col="{ span: 18 }" :model="formRelation" ref="formRelation">
          <a-form-model-item label="园区服务商" prop="parkId" :rules="[{ required: true, message: '请选择园区服务商!' }]">
            <a-select v-model="formRelation.parkId" style="width: 300px" placeholder="请选择园区服务商" show-search :filter-option="filterOption">
                <a-select-option v-for="(item,key) in parkData" :key="key" :value="item.parkId">{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="任务模板" prop="fileUrl" :rules="[{ required: true, message: '请上传任务模板!' }]">
            <a-upload
              style="width:100%"
              v-model="formRelation.fileUrl"
              :file-list="formRelation.fileList"
              :before-upload="beforeUpload"
              :customRequest="handleExceed"
              :remove="handleUploadRemove">
              <a-button icon="upload">上传任务模板</a-button>
            </a-upload>
          </a-form-model-item>
        </a-form-model>
      </a-card>
      <a-card title="友情提示">
        <template #extra><a-button icon="download" @click="downTaskTemp" class="ant-btn-warning">下载任务模板</a-button></template>
        <div>
          <p>1、请下载标准的任务模板</p>
          <p>2、模板中的所有字段都需要必填、请严格填写真实的数据。</p>
        </div>
      </a-card>
    </a-modal>
</template>
<script>

import { mapGetters } from 'vuex'
import store from '@/store'
import { 
    allImportOfflineTaskTemp,
} from '@/api/manage/task'
export default {
  name: 'taskOffine',
  data () {
    return {
        formRelation:{
            title:'导入线下结算单',
            fileUrl:'',
            parkId:'',
            fileList:[],
            visible:false
        },
        parkData:[],
        taskId:'',
        submitLoading:false
    }
  },
   computed: {
        ...mapGetters(['userInfo'])
    },
  methods:{
    add(){
        this.formRelation.fileUrl = '';
        this.formRelation.fileList = [];
        this.formRelation.visible = true;
        this.initSelect();
    },
    async initSelect(){
        let params = {enterpriseId:this.userInfo.relationId}
        const {data} = await store.dispatch('getEnterpriseOrParkEnabled',params);
            data && data.forEach(v=>{
            v.value = v.parkId;
            v.label = v.name;
        })
        this.parkData = data;
    },
    async downTaskTemp(){
      await store.dispatch('allGetOfflineTaskTemp');
    },
    importTemp(){
      this.formRelation.fileList = [];
      this.formRelation.visible = true;
    },
    beforeUpload(file, fileList) {
        const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isExcel) {
            this.$message.error('只能上传后缀 xlsx、xls格式!')
        }
        const isSize = file.size / 1024 / 1024 < 10
        if (!isSize) {
            this.$message.error('文件不得大于10MB!')
        }
         if(isExcel && isSize){
          this.fileList = fileList
        }
        return isExcel && isSize
    },
    handleUploadRemove(file){
       this.formRelation.fileUrl = '';
        this.formRelation.fileList.splice(0,1);
    },
    async handleExceed(file, fileList) {
        this.formRelation.fileUrl = file.file;
        this.formRelation.fileList = [];
        this.formRelation.fileList.push(file.file)
    },
    filterOption(input, option) {
        return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
    },
    submitTaskTemp(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
            let formData = new FormData();
            formData.append("file",this.formRelation.fileUrl);
            formData.append("parkId",this.formRelation.parkId);
            this.submitLoading = true;
            const {code,data} = await allImportOfflineTaskTemp(formData);
            this.submitLoading = false;
            if(code === '1'){
                this.$message.success('操作成功');
                this.formRelation.visible = false;
                this.$emit("on-ok");
            }
        }else{
          return false;
        }
      });
    },
    close(){
      this.formRelation.visible = false;
    }
  }
}
</script>
